import React, { Component } from "react";
import { getProTypeList ,getHomeSwiper} from "../../data/api";
import "./Category.scss";
import SearchInput from "../searchInput/SearchInput";
import { Carousel } from "antd-mobile";
import {withRouter} from 'react-router-dom';
class Category extends Component {
  state = {
    categories: [], //全部的分类信息（左边显示的）
    select_index: 0, //默认选中第0 个下标
    rightContent: {
    children:[] }, // 右边的内容项
    swiperList: [], //轮播图数据
  };

// 分类菜单右边逻辑
  handleProductItemClick=(goods_id) => {
    this.props.history.push("goodDetail/"+goods_id);
  }
  


  //点击左边的一层菜单
  handleItemClick = (e) => {
    // console.log(e.target.dataset); //dataset可以获取到当前点击元素的索引（是字符串类型的）,也就是下面传过来的index
    let { index } = e.target.dataset; //解构出来把dataset里的值赋值给index
    //   console.log(this.state.categories[index].children)
    this.setState({
      select_index: parseInt(index), //将字符串转成数字
      rightContent:this.state.categories[index]
    });
  };

 //跳转到商品详情页面
 gotoOrderDetils = (goods_id) => {
  this.props.history.push("orderDetils/" + goods_id);
 };

  async componentDidMount() {
    let res = await getProTypeList();
    // console.log(res);
    let message = res.message || [];
    let swiperList=await getHomeSwiper();
    this.setState({
      categories: message,
      rightContent: message[0] || [],
      swiperList: swiperList.message||[],
    });
  }

  render() {
    return (
      <div className="wyCategory">
        <SearchInput></SearchInput>
        <div className="wyCategoryContent">
 {/* 左边内容开始 */}
        {/* 在父元素上设置点击事件，让子元素的事件冒泡冒上来 */}
        <div className="categoryContentLeft" onClick={this.handleItemClick}>
          {this.state.categories.map((c, index) => {
            return (
              <div
                data-index={index}
                className={this.state.select_index===index?"contentLeftItem active":"contentLeftItem"}
                key={c.cat_id}

              >
                {c.cat_name}
              </div>
            );
          })}
        </div>
        {/* 左边内容结束 */}
        {/* 右边的内容开始 */}
        <div className="categoryContentRight">
          {/* 轮播图组件的开始 */}
           <div className="wySwiper">
            <Carousel autoplay={true} infinite dotStyle={{width:"20px",height:"3px"}} dotActiveStyle={{width:"20px",height:"3px",backgroundColor:"white"}}>
              {this.state.swiperList.map((val) => (
                <img
                  onClick={this.gotoOrderDetils.bind(this, val.goods_id)}
                  key={val.goods_id}
                  src={val.image_src}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              ))}
            </Carousel>
          </div> 
          {/* 轮播图组件的结束 */}
          {
          this.state.rightContent.children.map((v, i) => {
            return (
              <div className="contentRightItem" key={v.cat_id}>
                <div className="rightItemTitle">--  {v.cat_name}  --</div>
                 {/* 商品列表开始 */}
                  <div className="rightItemList">
                   {v.children&&v.children.map((vv)=>{
                     return(
                       <div className="listProductItem" key={vv.cat_id} onClick={this.handleProductItemClick.bind(this,vv.cat_id)}>
                         <div className="imgWrapper">
                        <img src={vv.cat_icon} alt="" />
                       </div>
                     <div className="title">{vv.cat_name}</div>
                     </div>
                     )
                   })}
                 </div> 
                 {/* 商品列表结束 */}
              </div>
            );
          }
          )
          } 
        </div> 
        {/* 右边的内容结束 */}
          
        </div>

      </div>
    );
  }
}
export default withRouter(Category);